<template>
	<view>
		<m-for-skeleton :avatarSize="200" :row="3" :loading="loading" :isarc="key%2==0?'square':'square'"
			v-for="(item,key) in 5" :key="key">
		</m-for-skeleton>
		<uamhead></uamhead>
		<view class="imgboxx">
			<view class="img-box2">
				<img src="../../static/needle.png" alt="" class="imgone" />
			</view>
			<view class="img-box">
				<img src="../../static/disc.png" alt="" class="imgtwo" />
				<text class="iconfont" @click="playOrPause">{{ isPlaying ? '&#xe72f' : '&#xe730' }}</text>
				<img :src="songDetail" class="imgthree" alt="" :style="{ transform: 'rotate(' + rotate + 'deg)' }">
			</view>
		</view>
		<p v-for="(item,index) in lyrics" :key="index">{{ item }}</p>
	</view>
</template>

<script>
	import {songDetail,songUrl,songLyric} from '../../common/api.js';
	export default {
		data() {
			return {
				title:'hahaha',
				song:{
					id:'',
					name:'',
					artist:'',
					picUrl:'',
					songUrl:'',
					lyric:''
				},
				isplaying:false,
				innerAudioContext:{},
				lyricIndex : 0
			}
		},
		onLoad(option) {
			this.song.id=option.songId;
			songDetail(this.song.id).then(res=>{
				let s=res.data.songs[0]
				this.song.name=s.name
				this.song.id = s.id
				this.song.artist=s.ar[0].name
				this.song.picUrl=s.al.picUrl
			});
			songUrl(this.song.id).then(res=>{
				this.song.songUrl=res.data.data[0].url;
			});
			songLyric(this.song.id).then(res=>{
				let lyric=res.data.lrc.lyric
				let result = [];
				let re = /\[([^\]]+)\]([^[]+)/g;
				lyric.replace(re,($0,$1,$2)=>{
					result.push({ time : this.formatTimeToSec($1) , lyric : $2 });
				});
				this.song.lyric = result;
			});
			setTimeout(()=>{this.initIAC()},500);
		},
		methods: {
			initIAC(){
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;
				innerAudioContext.src = this.song.songUrl;
				innerAudioContext.onPlay(() => {
				  this.listenLyricIndex();
				});
				this.innerAudioContext=innerAudioContext;
				this.isplaying=false;
			},
			playing(){
				this.innerAudioContext.play()
				this.isplaying=true;

			},
			paused(){
				this.innerAudioContext.pause()
				this.isplaying=false;
			},
			formatTimeToSec(time){
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			listenLyricIndex(){
				clearInterval(this.timer);
				this.timer = setInterval(()=>{
				for(var i=0;i<this.song.lyric.length;i++){
				if( this.song.lyric[this.song.lyric.length-1].time < this.innerAudioContext.currentTime ){
				    this.lyricIndex = this.song.lyric.length-1;
					break;
					}
						if( this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i+1].time > this.innerAudioContext.currentTime ){
						this.lyricIndex = i;
						}
					}
				});
			}
		}
	}
</script>

<style>
.img-boxx{
	height: 900rpx;
}

.img-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800rpx; 
    height: 800rpx; 
    margin-top: -150rpx; 
}

.imgtwo {
	width: 600rpx;
	height: 600rpx;
	position: absolute;
	margin: auto;
	z-index: 1; 
}
.imgthree {
	position: absolute;
	z-index: 2; 
	width: 400rpx; 
	height: 400rpx; 
	border-radius: 50%;
}

.iconfont {
	position: absolute;
	z-index: 3; 
	font-size: 50px; 
}
.img-box2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250rpx;
}
.imgone{
	width: 250rpx;
	position: absolute;
	z-index: 2;
}
</style>
